import { useModel } from "umi";
import { Card as SemiCard, ButtonGroup, Button, List } from "@douyinfe/semi-ui";
import { IconRefresh } from "@douyinfe/semi-icons";

const CustomerList = ({ cardBodyHeight }) => {
    const { dataLoading, customers, selectedCustomer, setSelectedCustomer, loadCustomers } = useModel("customer");

    return (
        <SemiCard
            title={<span style={{ lineHeight: "32px", fontSize: 15 }}>客户列表</span>}
            headerStyle={{ padding: "10px 14px" }}
            shadows="always"
            bordered={false}
            size="default"
            bodyStyle={{ padding: 1, height: cardBodyHeight, overflow: "auto" }}
            headerExtraContent={
                <ButtonGroup>
                    <Button icon={<IconRefresh />} onClick={loadCustomers}></Button>
                </ButtonGroup>
            }
        >
            <List
                loading={dataLoading}
                dataSource={customers}
                renderItem={(item, index) => (
                    <List.Item
                        key={index}
                        className={`list-item ${selectedCustomer?.oiUuid === item?.oiUuid ? "list-item-selected" : ""}`}
                        main={item.oiName}
                        onClick={() => setSelectedCustomer(item)}
                    ></List.Item>
                )}
            />
        </SemiCard>
    );
};

export default CustomerList;
